<template>
  <div class='container-directorys'>
    <el-card>
    <div slot="header" v-if="subject.id && subject.name">
    <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item>学科管理</el-breadcrumb-item>
    <el-breadcrumb-item>{{subject.name}}</el-breadcrumb-item>
    <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--  -->
      <el-form :inline="true" :model="list" class="demo-form-inline">
  <el-form-item label="目录名称">
    <el-input v-model="list.directoryName" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="状态">
    <el-select v-model="list.state" placeholder="请选择">
      <el-option label="启用" value="1"></el-option>
      <el-option label="禁用" value="0"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button @click="handleClear()">清除</el-button>
    <el-button type="primary" @click="handleSearch()">搜索</el-button>
  </el-form-item>
  <el-button type="text" id="text" icon="el-icon-back" v-if="subject.id && subject.name" @click="$router.back()">返回学科</el-button>
  <el-button type="success" icon="el-icon-edit" @click="handleOpen('add')">新增目录</el-button>
  <!-- lll -->
</el-form>
<!--  -->
 <el-alert
    :title="`数据一共${total}条`"
    type="info"
    :closable='false'
    show-icon>
  </el-alert>
  <!--  -->
  <template>
    <el-table
    :data="catelog"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="序号"
        width="80"
        type="index"
        >
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="所属学科"
        width="180">
      </el-table-column>
      <el-table-column
        prop="directoryName"
        label="目录名称">
      </el-table-column>
      <el-table-column
        prop="username"
        label="创建者">
      </el-table-column>
      <el-table-column
        label="创建日期">
        <template slot-scope="scope">{{scope.row.addDate|parseTimeByString}}</template>
      </el-table-column>
      <el-table-column
        prop="totals"
        label="面试题数量">
      </el-table-column>
      <el-table-column

        label="状态">
        <template #default="{row}">
         {{row.state===1 ?'已禁用':'已启用'}}
        </template>
      </el-table-column>

      <el-table-column
        label="操作">
   <template slot-scope="scope">
    <!-- {{scope.row}} -->
          <div class="buttonText">
     <el-button type="text" @click="handleStop(scope.row)">{{scope.row.state===1?'启用':'禁用'}}</el-button>
     <el-button type="text" @click="handleEdit('edit',scope.row.id)" :disabled ="scope.row.state===0">修改</el-button>
     <el-button type="text" @click="handleDel(scope.row.id)" :disabled ="scope.row.state===0">删除</el-button>
      </div>
      </template>
      </el-table-column>
    </el-table>
  </template>
       <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      :current-page="list.page"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="list.pagesize"
      :total="total"
      layout="prev, pager, next,sizes, jumper">
    </el-pagination>
  <!--current-page 当前页数-page  page-size 每页显示条目个数pagesize   page-sizes 每页显示个数  -->
    </el-card>
    <!-- 弹框 -->
    <el-dialog
  :title="boxTitle"
  :visible.sync="dialogVisible"
  width="400px"
  :before-close="handleClose">
  <el-form class="demo-form" label-width="80px" :model="reqAdd" :rules="rules" ref="reqAdd">
    <el-form-item label="所属学科" prop="subjectID" v-if="!this.$route.query.id">
      <el-select v-model="reqAdd.subjectID" >
        <!-- <el-option :value="item.id"  v-for="item in simple" :key='item.value' :label="item.subjectName"></el-option> -->
        <el-option :value="item.value"  v-for="item in simple" :key='item.value' :label="item.label"></el-option>

      </el-select>
    </el-form-item>
    <br>
    <el-form-item label="目录名称" prop="directoryName">
      <el-input v-model="reqAdd.directoryName"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="handleCancle">取 消</el-button>
    <el-button type="primary" @click="handleAdd()">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import { simple as subjectList } from '@/api/hmmm/subjects.js'
import { list, add, remove, detail, update } from '@/api/hmmm/directorys.js'
export default {
  data () {
    return {
      list: {
        page: 1,
        pagesize: 10,
        subjectID: null, // 学科id
        directoryName: null, // 目录名称
        state: null
      },
      simple: [],
      reqAdd: {
        subjectID: '',
        directoryName: ''
      },
      rules: {
        subjectID: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ],
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      catelog: [],
      total: 0,
      titleType: '',
      dialogVisible: false
    }
  },
  async created () {
    this.getList()
    const { data } = await subjectList({
      pagesize: 100
    })
    // this.simple = data.items
    // console.log(data)
    this.simple = data
    // console.log(data) // 和获取表单id一致
    console.log(this.$route.query)
    if (this.$route.query.id) {
      this.list.subjectID = this.$route.query.id
      this.getList()
    } else {
      this.getList()
    }
  },
  methods: {
    async getList () {
      const { data } = await list(this.list)
      console.log(data)
      // console.log(data.items)
      this.catelog = data.items
      // console.log(this.catelog)
      this.total = data.counts
      this.page = data.page
    },
    handleSearch () {
      // console.log('submit!')
      this.list.page = 1
      this.getList()
    },
    handleClear () {
      this.list.directoryName = null
      this.list.state = null
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.list.pagesize = 1
      this.list.pagesize = val
      this.getList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.list.page = val
      this.getList()
    },
    async handleOpen (type) {
      if (type === 'add') {
        this.titleType = type
      }
      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false
    },
    // 确认按钮
    // async handleAdd () {
    //   await this.$refs.reqAdd.validate() // 校验
    //   if (this.titleType === 'add') {
    //     await add(this.reqAdd)
    //     this.$refs.reqAdd.resetFields() // 重置表单
    //     this.dialogVisible = false// 关闭弹框
    //     this.getList()
    //   } else {
    //     const { id, subjectID, directoryName } = this.reqAdd
    //     const res = await update({ id, subjectID, directoryName })
    //     console.log(res)
    //     this.getList()
    //     this.dialogVisible = false
    //   }
    // },
    // if (this.reqAdd.id) {
    //     await add(this.reqAdd)
    //   } else {
    //     console.log(this.$route.query.id)
    //   }
    async handleAdd () {
      await this.$refs.reqAdd.validate() // 校验
      if (this.titleType === 'add') {
        if (this.$route.query.id) {
          this.reqAdd.subjectID = +this.$route.query.id
          await add(this.reqAdd)
        } else {
          await add(this.reqAdd)
        }
        this.$refs.reqAdd.resetFields() // 重置表单
        this.dialogVisible = false// 关闭弹框
        this.getList()
      } else {
        const { id, subjectID, directoryName } = this.reqAdd
        const res = await update({ id, subjectID, directoryName })
        console.log(res)
        this.getList()
        this.dialogVisible = false
      }
    },
    handleCancle () {
      this.dialogVisible = false
    },
    async handleDel (id) {
      console.log(id)
      await remove({ id })
      this.getList()
    },
    // 回显
    async handleEdit (type, id) {
      this.titleType = type
      this.dialogVisible = true
      const res = await detail({ id })
      // console.log(res.data)
      this.reqAdd = { ...res.data }
    },
    async handleStop (row) {
      row.state === 1 ? (row.state = 0) : (row.state = 1)
    }
  },
  computed: {
    boxTitle () {
      let title = '标题'
      if (this.titleType === 'add') title = '新增目录'
      if (this.titleType === 'edit') title = '修改目录'
      return title
    },
    subject () {
      return this.$route.query || {}
    }
  }
}

</script>

<style scoped lang='scss' >
.container-directorys {
   margin: 10px 10px;
}
.el-form-item {
margin-bottom: 0;
}
.el-button--medium {
  font-size: 12px;
}
// ::v-deep .el-input__inner {
//    height: 34px;
//     line-height: 34px;
//     width: 207px;
// }
::v-deep .el-select--medium {
  height: 34px;
    line-height: 34px;
    width: 207px;
}
.el-input--small .el-input__inner {
    height: 34px;
    line-height: 34px;
}
::v-deep .el-form-item__label{
      width: 80px;
      text-align: right;
}
.el-button--success {
  float: right;
}
.el-alert {
  margin-top: 10px;
  margin-bottom: 10px;
}
::v-deep .el-table__header-wrapper {
  border-bottom: 2px solid #e8e8e8;
}
.el-pagination {
  float: right;
  margin-top:20px;
  margin-bottom: 20px;
}
.el-button--medium[data-v-60dec6f3] {
font-size: 14px;
}
::v-deep .el-dialog__footer {
  text-align:right;
}
.el-select--medium {
  width: 280px;
}
#text {
  margin-left: 140px;
}
::v-deep .cell {
  text-align: center;
}
</style>
